.metro_tmtimeline {
	margin: 30px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
}

/* The line */
.metro_tmtimeline:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #E5E5E5;
	left: 20%;
	margin-left: -6px;
}

/* The date/time */
.metro_tmtimeline>li {
	position: relative;
}

/*----green-----*/
.metro_tmtimeline>li.green .metro_tmicon, .metro_tmtimeline>li.green .metro_tmlabel
	{
	background: #74B749;
}

.metro_tmtimeline>li.green:nth-child(2n+1) .metro_tmlabel:after {
	border-right-color: #74B749;
}

.metro_tmtimeline>li.green .time {
	color: #74B749;
}
/*----purple----*/
.metro_tmtimeline>li.purple .metro_tmicon, .metro_tmtimeline>li.purple .metro_tmlabel
	{
	background: #9D4A9C;
}

.metro_tmtimeline>li.purple:nth-child(2n+1) .metro_tmlabel:after,
	.metro_tmtimeline>li.purple .metro_tmlabel:after {
	border-right-color: #9D4A9C;
	border-color: transparent #9D4A9C transparent transparent;
}

.metro_tmtimeline>li.purple .time {
	color: #9D4A9C;
}

/*----red-----*/
.metro_tmtimeline>li.red .metro_tmicon, .metro_tmtimeline>li.red .metro_tmlabel
	{
	background: #DE577B;
}

.metro_tmtimeline>li.red:nth-child(2n+1) .metro_tmlabel:after {
	border-right-color: #DE577B;
}

.metro_tmtimeline>li.red .time {
	color: #DE577B;
}
/*--------*/

/*-----yellow----*/
.metro_tmtimeline>li.yellow .metro_tmicon, .metro_tmtimeline>li.yellow .metro_tmlabel
	{
	background: #FFB400;
}

.metro_tmtimeline>li.yellow:nth-child(2n+1) .metro_tmlabel:after,
	.metro_tmtimeline>li.yellow .metro_tmlabel:after {
	border-right-color: #FFB400;
	border-color: transparent #FFB400 transparent transparent;
}

.metro_tmtimeline>li.yellow .time {
	color: #FFB400;
}

/*----blue----*/
.metro_tmtimeline>li.blue .metro_tmicon, .metro_tmtimeline>li.blue .metro_tmlabel
	{
	background: #5AA9ED;
}

.metro_tmtimeline>li.blue:nth-child(2n+1) .metro_tmlabel:after {
	border-right-color: #5AA9ED;
}

.metro_tmtimeline>li.blue .time {
	color: #5AA9ED;
}
/*----orange----*/
.metro_tmtimeline>li.orange .metro_tmicon, .metro_tmtimeline>li.orange .metro_tmlabel
	{
	background: #F37B53;
}

.metro_tmtimeline>li.orange:nth-child(2n+1) .metro_tmlabel:after,
	.metro_tmtimeline>li.orange .metro_tmlabel:after {
	border-right-color: #F37B53;
	border-color: transparent #F37B53 transparent transparent;
}

.metro_tmtimeline>li.orange .time {
	color: #F37B53;
}

/*----gray----*/
.metro_tmtimeline>li.gray .metro_tmicon, .metro_tmtimeline>li.gray .metro_tmlabel
	{
	background: #cecece;
}

.metro_tmtimeline>li.gray:nth-child(2n+1) .metro_tmlabel:after {
	border-right-color: #cecece;
}

.metro_tmtimeline>li.gray .time {
	color: #cecece;
}
/*--------*/

/*----Timeline box shadow-----*/
.metro_tmtimeline>li.green .metro_tmicon {
	box-shadow: 0 0 0 5px rgba(116, 183, 73, 0.3);
}

.metro_tmtimeline>li.purple .metro_tmicon {
	box-shadow: 0 0 0 5px rgba(157, 74, 156, 0.3);
}

.metro_tmtimeline>li.red .metro_tmicon {
	box-shadow: 0 0 0 5px rgba(222, 87, 123, 0.3);
}

.metro_tmtimeline>li.yellow .metro_tmicon {
	box-shadow: 0 0 0 5px rgba(255, 180, 0, 0.3);
}

.metro_tmtimeline>li.blue .metro_tmicon {
	box-shadow: 0 0 0 5px rgba(90, 169, 237, 0.3);
}

.metro_tmtimeline>li.orange .metro_tmicon {
	box-shadow: 0 0 0 5px rgba(243, 128, 83, 0.3);
}

.metro_tmtimeline>li.gray .metro_tmicon {
	box-shadow: 0 0 0 5px rgba(192, 192, 192, 0.3);
}
/*--------*/
.metro_tmtimeline>li .metro_tmtime {
	display: block;
	width: 15%;
	padding-right: 100px;
	position: absolute;
}

.metro_tmtimeline>li .metro_tmtime span {
	display: block;
	text-align: right;
}

.metro_tmtimeline>li .metro_tmtime span:first-child {
	font-size: 0.9em;
	color: #bdd0db;
}

.metro_tmtimeline>li .metro_tmtime span:last-child {
	font-size: 2.9em;
}

.metro_tmtime span {
	margin-bottom: 5px;
}

.metro_tmtime span.date {
	margin-top: -15px;
}

.metro_tmtime span.time {
	
}

/* Right content */
.metro_tmtimeline>li .metro_tmlabel {
	margin: 0 0 15px 25%;
	/*background: #3594cb;*/
	color: #fff;
	padding: 2em;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 1.4;
	position: relative;
	border-radius: 5px;
}

.metro_tmtimeline>li .metro_tmlabel h2 {
	margin-top: 0px;
	padding: 0 0 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

/* The triangle */
.metro_tmtimeline>li .metro_tmlabel:after {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	/*border-right-color: #3594cb;*/
	border-width: 10px;
	top: 10px;
}

.metro_tmtimeline>li:nth-child(odd) .metro_tmlabel:after {
	/*border-right-color: #6cbfee;*/
	
}

/* The icons */
.metro_tmtimeline>li .metro_tmicon {
	width: 40px;
	height: 40px;
	font-family: 'ecoico';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-size: 1.4em;
	line-height: 40px;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	color: #fff;
	/*background: #46a4da;*/
	border-radius: 50% !important;
	/*box-shadow: 0 0 0 5px #E5E5E5;*/
	text-align: center;
	left: 20%;
	top: 0;
	margin: 0 0 0 -25px;
}

.metro_tmicon-phone:before {
	content: "\e000";
}

.metro_tmicon-screen:before {
	content: "\e001";
}

.metro_tmicon-mail:before {
	content: "\e002";
}

.metro_tmicon-earth:before {
	content: "\e003";
}

/* Example Media Queries */
@media screen and (max-width: 65.375em) {
	.metro_tmtimeline>li .metro_tmtime span:last-child {
		font-size: 1.5em;
	}
	.metro_tmtime span.date {
		margin-top: 0px;
	}
}

@media screen and (max-width: 47.2em) {
	.metro_tmtimeline:before {
		display: none;
	}
	.metro_tmtimeline>li .metro_tmtime {
		width: 100%;
		position: relative;
		padding: 0 0 20px 0;
	}
	.metro_tmtimeline>li .metro_tmtime span {
		text-align: left;
	}
	.metro_tmtimeline>li .metro_tmlabel {
		margin: 0 0 30px 0;
		padding: 1em;
		font-weight: 400;
		font-size: 95%;
	}
	.metro_tmtimeline>li.purple .metro_tmlabel:after {
		right: auto;
		left: 20px;
		border-right-color: transparent;
		border-bottom-color: #9D4A9C !important;
		top: -20px;
	}
	.metro_tmtimeline>li.green .metro_tmlabel:after {
		right: auto;
		left: 20px;
		border-right-color: transparent;
		border-bottom-color: #74B749 !important;
		top: -20px;
	}
	.metro_tmtimeline>li.green:nth-child(2n+1) .metro_tmlabel:after,
		.metro_tmtimeline>li.red:nth-child(2n+1) .metro_tmlabel:after,
		.metro_tmtimeline>li.blue:nth-child(2n+1) .metro_tmlabel:after,
		.metro_tmtimeline>li.gray:nth-child(2n+1) .metro_tmlabel:after {
		border-right-color: transparent;
	}
	.metro_tmtimeline>li.red .metro_tmlabel:after {
		right: auto;
		left: 20px;
		border-right-color: transparent;
		border-bottom-color: #DE577B !important;
		top: -20px;
	}
	.metro_tmtimeline>li.yellow .metro_tmlabel:after {
		right: auto;
		left: 20px;
		border-right-color: transparent;
		border-bottom-color: #FFB400 !important;
		top: -20px;
	}
	.metro_tmtimeline>li.blue .metro_tmlabel:after {
		right: auto;
		left: 20px;
		border-right-color: transparent;
		border-bottom-color: #5AA9ED !important;
		top: -20px;
	}
	.metro_tmtimeline>li.orange .metro_tmlabel:after {
		right: auto;
		left: 20px;
		border-right-color: transparent;
		border-bottom-color: #F37B53 !important;
		top: -20px;
	}
	.metro_tmtimeline>li.gray .metro_tmlabel:after {
		right: auto;
		left: 20px;
		border-right-color: transparent;
		border-bottom-color: #CECECE !important;
		top: -20px;
	}
	.metro_tmtimeline>li .metro_tmicon {
		position: relative;
		float: right;
		left: auto;
		margin: -55px 5px 0 0px;
	}
	.metro_tmtime span.date {
		margin-top: 0px;
	}
}